<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义事件</title>
    <style type="text/css">
        header { margin: 15px 0; border-bottom: 1px solid #dfdfdf;}
        .parent { border: 1px solid blue ; }
        .child { margin: 10px; border: 1px solid green; }
        .child>input[type=text] { width: 100px; text-align: center ; font-size: 20px ;}
    </style>
</head>
<body>

    <header>
        <a href="index.html">返回首页</a>
    </header>

    <h3>使用自定义事件从子组件向父组件传递数据</h3>

    <!-- 根组件的挂载点 -->
    <div id="root"></div>

    <script src="vue.global.js"></script>

    <script>

        const controller = {
            template: `<div class="child">
                          <button v-on:click="decrease">减少</button>
                          <input type="text" v-model.lazy.number="increment">
                          <button @click="increase">增加</button>
                       </div>`,
            data(){
                return { increment: 10 }
            },
            methods: {
                decrease(evt){
                    console.log(evt.target);
                    console.log(this);
                    // 触发 "降低" 事件
                    this.$emit( '降低' , this.increment );
                },
                increase(evt){
                    console.log(evt.target);
                    // 触发 "增长" 事件
                    this.$emit( '增长' , this.increment );
                }
            }
        }

        const app = Vue.createApp({
            template: `<div class="parent">
                          <p>{{ counter }}</p>
                          <!-- 监听子组件触发的事件(自定义事件) -->
                          <kaifamiao-controller v-on:增长="handleIncrease" v-on:降低="handleDecrease"></kaifamiao-controller>
                       </div>`,
            data(){
                return {
                    counter: 10000
                }
            },
            methods: {
                handleIncrease(value){
                    console.log( '接受到由子组件通过触发自定义事件传递的数值: ' , value );
                    this.counter += value ;
                },
                handleDecrease(value){
                    console.log( '接受到由子组件通过触发自定义事件传递的数值: ' , value );
                    this.counter -= value ;
                }
            },
            components: {
                'kaifamiao-controller' : controller
            }
        });
        const root = app.mount('#root');
        console.log(root);
    </script>
    
</body>
</html>